<template>
  <ContentWrap
    class="mb-0!"
    :class="[
      footer
        ? '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height)-10px)]'
        : '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-20px)]'
    ]"
    :bodyStyle="{ height: '100%', padding: '10px' }"
  >
    <div class="flex flex-col !h-full justify-between">
      <el-scrollbar viewClass="flex-grow ">
        <el-row>
          <el-col :span="24">
            <div class="custom-text-18 mb-10px"> 销售人 </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
          <el-popover
            placement="top-start"
            title="销售人"
            :width="200"
            trigger="hover"
            :content="cartEmployeeText"
          >
            <template #reference>
              <div class="custom-text-16">
                <el-text line-clamp="1"> {{ cartEmployeeText }} </el-text>
              </div>
            </template>
          </el-popover>
        </el-row>
        <!-- 换卡信息 -->
        <el-row v-if="serviceReplaceList.length > 0">
          <el-col :span="24">
            <div class="custom-text-16"> 换卡信息 </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
          <el-row class="w-100%">
            <el-col :span="24" v-for="(item, index) in serviceReplaceList" :key="index">
              <div class="flex justify-between custom-text-16">
                <el-text line-clamp="1" class="w-70%">
                  <el-tag effect="dark" type="info" class="!p-2px !h-full"> 原</el-tag>
                  {{ item.spu.spuName }}
                </el-text>
                <div class="custom-text-16">
                  x {{ item.count }}
                  <span v-if="item.sku.skuType == 21"> {{ filterCardTime(item.unit) }}</span>
                  <span v-else>次</span>
                </div>
              </div>
            </el-col>
            <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
          </el-row>
        </el-row>
        <!-- 服务信息 -->
        <el-row v-if="serviceInfo.length > 0">
          <el-col :span="24">
            <div class="custom-text-16"> 服务信息 </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
          <el-row class="w-100%">
            <el-col :span="24" v-for="(item, index) in serviceInfo" :key="index">
              <div class="flex justify-between custom-text-16">
                <el-text line-clamp="1" class="w-70%">
                  {{ item.spuName }}{{ item.skuSerialName }}
                </el-text>
                <div> x {{ item.usedTimes }} 次 </div>
              </div>
            </el-col>
            <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
          </el-row>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 卡项消耗 </div>
              <div> ￥{{ fenToYuan(totalPerformanceFee) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 您目前选择服务 </div>
            </div>
            <div class="custom-text-16 c-[var(--el-color-primary)]">
              {{ serviceInfo.length }}种卡项共{{ itemsTimes }}次
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <!-- 补差信息 -->

        <el-row v-if="orderInfo?.price.payPrice > 0">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 需补差价 </div>
              <div class="custom-text-16 c-[var(--el-color-primary)]">
                ￥{{ fenToYuan(orderInfo.price.payPrice) }}
              </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <el-row v-for="(item, index) in orderInfo.pay" :key="index">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> {{ item.classifyName }} </div>
              <div> <span>￥</span>{{ fenToYuan(item.paybalance) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
      </el-scrollbar>
      <div class="flex justify-end">
        <slot name="button"></slot>
      </div>
    </div>
  </ContentWrap>
</template>
<script setup lang="ts" name="orderInfo">
/** 服务购物车信息 */
import { useShopServiceWithOut } from '@/store/modules/shop/service'
import { useServiceUtils } from '@/views/shop/service/hooks/useService'
const shopService = useShopServiceWithOut()
const { filterCardTime } = useServiceUtils()
import { useAppStore } from '@/store/modules/app'
import { fenToYuan } from '@/utils'
import { propTypes } from '@/utils/propTypes'

const appStore = useAppStore()
const footer = computed(() => appStore.getFooter)
defineProps({
  cartEmployeeText: propTypes.string.def(''),
  orderInfo: propTypes.object
})

const serviceReplaceList = computed(() => {
  return shopService.getServiceReplaceList
})
const serviceInfo = computed(() => {
  return shopService.getServiceInfo
})

const totalPerformanceFee = computed(() => {
  return shopService.getTotalPerformanceFee
})

const itemsTimes = computed(() => {
  let count = 0
  serviceInfo.value.forEach((ele) => {
    count += Number(ele.usedTimes)
  })
  return count
})
</script>
